import { useState } from "react";
import { Switch, Tooltip } from "antd";
import { TextArea } from "@/components/func";
import { OnOffDesc } from "@/components/render";

interface props {
  customerDesc: string; // 客户描述
  setCustomerDesc: any; // 设置客户描述
}

const QrCustomerDesc = ({ customerDesc, setCustomerDesc }: props) => {
  const [isLimit, setIsLimit] = useState(false);

  return (
    <div className="flex mb-24">
      <span className="w-106 text-right mr-16">客户描述:</span>
      {/* 开关 */}
      <div>
        <div className="flex items-center mb-12">
          <Switch
            size="small"
            onChange={e => {
              setIsLimit(e);
            }}
            checked={isLimit}
          />
          <OnOffDesc flag={isLimit} desc="开启后可为客户添加描述，将在客户画像里展示" />
          <Tooltip
            overlayClassName="w-530 max-w-530 p-10 h-340"
            placement="topLeft"
            title={() => {
              return (
                <img
                  className="w-full h-full"
                  alt=""
                  src="https://assets.weibanzhushou.com/web/we-work-webapp/live-code_desc-example-img.b5afbf7e2235.png"
                />
              );
            }}
            color={"#fff"}>
            <span className="text-blue-default cursor-pointer">查看示例</span>
          </Tooltip>
        </div>

        <div className={`${isLimit ? "" : "none"}`}>
          <TextArea
            option="right"
            hide
            placeholder="请输入客户描述内容"
            value={customerDesc}
            maxLength={150}
            onChange={(value: any) => {
              setCustomerDesc(value);
            }}
          />
        </div>
      </div>
    </div>
  );
};

export default QrCustomerDesc;
